<template>
  <div>
    <el-header>
      <van-nav-bar
        title="咖啡师-考评端"
        right-text="退出登录"
        left-arrow
        @click-left="goBack"
        @click-right="logout"
      />
    </el-header>
    <el-container style="height: max-content; ; ">
      <el-aside width="auto" style="height: 100%;background-color: white">
        <div style="font-weight: bold; font-size: large">
          {{ '时间批次：'}}<br>{{batchTime}}
        </div>
        <br>
        <el-button @click="onRefresh" type="primary">刷新数据</el-button>
        <!--        <br><br>-->

      </el-aside>
      <el-container>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="width: 95%;">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <el-card v-for="item in list" :key="item.id"
                     :title="item"
                     shadow="always"
                     @click="toStuScore(e)"
            >
              <div slot="header" class="clearfix">
                <span style="font-weight: bold; font-size: large">{{ '位置：' + item.stationName }}
                  <el-tag>{{ '顺序：' + item.orderNum }}</el-tag>
                </span>
                <el-button v-if="item.isFinish === '1'" style="float: right; padding: 3px 0" type="text"
                           @click="toStuScore(item)" disabled
                >
                  <el-tag type="info">考试结束</el-tag>
                </el-button>
                <el-button v-else style="float: right; padding: 3px 0" type="text" @click="toStuScore(item)">
                  <el-tag style="font-weight: bold; font-size: large" type="danger">进入评分</el-tag>
                </el-button>
              </div>
              <div>
                <span style="font-weight: bold; font-size: large">{{ '学生编号：' + item.studentLoginName }}</span>

                <el-divider/>
              </div>
            </el-card>
          </van-list>
        </van-pull-refresh>

      </el-container>
    </el-container>


  </div>

</template>

<script>
import { listExam } from '@/api/examiner/examiner.js'

export default {
  name: 'Examiner',
  data() {
    return {
      batchTime: null,
      list: [],
      loading: false,
      finished: false,
      refreshing: false

    }
  },
  watch: {},
  created() {
    // this.getExamList()
    this.batchTime = this.$route.query.batchTime
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        this.getExamList()
        this.loading = false
        this.finished = true

        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    goBack() {
      this.$router.back()
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index'
        })
      }).catch(() => {
      })
    },
    getExamList() {
      this.loading = true
      this.batchTime = this.$route.query.batchTime
      listExam(this.batchTime).then(response => {
          // console.log('*********', response)
          var tmpList = []
          for (const dataKey in response.data) {
            // console.log("%%%%%",response.data[dataKey])
            tmpList = tmpList.concat(response.data[dataKey])
          }
          // console.log("%%%%%",tmpList)
          tmpList.sort(this.orderList('orderNum'))

          this.list = tmpList
          this.total = response.total
          this.loading = false
        }
      ).catch(res => {
        console.log('****ERROR*****', res)
      })
    },
    toStuScore(e) {
      // console.log('params:', e.studentLoginName)
      this.$router.push({
        path: '/examiner/stuScore',
        query: {
          examId: e.examId,
          paperId: e.paperId,
          stu: e.studentLoginName,
          order: e.orderNum,
          tid: e.id,
          stationName: e.stationName
        }
      })

    },
    orderList(attr) {
      return function(a, b) {
        return a[attr] - b[attr]
      }
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.bigQues-card {
  margin: 3%;
  //background-color: #8492a6;
}

.footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.box-card {
  width: 50%;
  margin: 3%;
}
</style>
